<!--
 * @Author: liuYang codkly@gmail.com
 * @Date: 2022-10-26 22:46:47
 * @LastEditors: lycodk lycodk@gmail.com
 * @LastEditTime: 2023-02-20 21:45:08
 * @FilePath: \coding\blog\blog_web\pages\index.vue
 * @Description: 
 * 暂无备注
-->
<template>
  <NuxtLayout name="custom">
   
    <div class="content max-w-screen-xl m-auto flex justify-center">
      <!-- 内容 -->
      <!-- 侧栏左边 invisible md:visible visibility: visible;-->
      <aside
          class="w-0 md:w-40 h-screen  left-aside z-20 transition-all relative "
          :style="menuStore.menuVisible ? 'width:10rem;' : ''"
      >
        <CMenu></CMenu>
      </aside>
      <!-- 内容 -->
      <section class="main w-screen p-3" :style="menuStore.menuVisible ? 'transform: scale(0.99);' : ''">
        <NuxtPage/>
      </section>

      <!-- 侧栏右边 -->
      <aside class="right-aside hidden md:block pt-3" style="width:260px">
        <card-me></card-me>
        <!-- 热门 -->
        <card-hot></card-hot>
        <!-- 分类 -->
        <card-classify></card-classify>
      </aside>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import {Moon, Sunny} from "@element-plus/icons-vue";
const menuStore = useMenuStore();
</script>

